<template>
  <div class="wrapper">
    <el-card>
      <div class="rowDiv">
        <div class="row-left">
          <div class="row-item">
            <span class="demonstration">日期:</span>
            <el-date-picker
              type="daterange"
              clearable
              v-model="state.value1"
              @change="chooseTimeRange"
              range-separator="至"
            >
            </el-date-picker>
          </div>
          <div class="row-item">
            退款单状态:<el-select
              v-model="state.waretype"
              @change="getOrderlist"
              clearable
              placeholder="选择订单状态"
            >
              <el-option label="待审核" value="1"></el-option>
              <el-option label="已完成" value="6"></el-option>
              <el-option label="已取消" value="20"></el-option>
            </el-select>
          </div>
        </div>
        <div class="row-right">
          <searchDiv
            :placeholder="state.placeholder"
            @searchClick="searchClick"
          ></searchDiv>
        </div>
      </div>
      <!-- 自己组造数据 -->
      <table class="order-headr-fixed text-center" border="1">
        <tr>
          <th class="w10">订单号</th>
          <th class="w14">商品名称</th>
          <th class="w8">销售单价</th>
          <th class="w8">退款单价</th>
          <th class="w8">数量</th>
          <th class="w8">退款金额</th>
          <th class="w10">退款原因</th>
          <th class="w8">退款方式</th>
          <th class="w10">买家信息</th>
          <th class="w8">操作</th>
        </tr>
      </table>
      <div class="order_list">
        <template v-for="(item, index) in state.result">
          <table class="orderTb" border="1">
            <tr>
              <th class="w10"></th>
              <th class="w14"></th>
              <th class="w8"></th>
              <th class="w8"></th>
              <th class="w8"></th>
              <th class="w8"></th>
              <th class="w10"></th>
              <th class="w8"></th>
              <th class="w10"></th>
              <th class="w8"></th>
            </tr>
            <tbody>
              <tr>
                <td colspan="10" class="p-double">
                  <div class="navFlex">
                    <div class="flexleft">
                      <div class="nav-item">退款单号:{{ item.pre_id }}</div>
                      <div class="nav-item">
                        发货单号:{{ item.w_order_pre_id }}
                      </div>
                      <div class="nav-item">
                        申请时间：{{ item.create_time }}
                      </div>
                      <div class="nav-item">退款状态:{{ item.status }}</div>
                      <div
                        class="nav-item"
                        style="display: flex; align-items: center"
                      >
                        <div>退款金额:{{ item.amount }}</div>
                      </div>
                    </div>
                    <div class="flexright">
                      <el-popover
                        placement="right"
                        :width="700"
                        title="操作记录"
                        trigger="hover"
                      >
                        <template #reference>
                          <div>操作记录</div>
                        </template>
                        <el-table :max-height="200" :data="item.records">
                          <el-table-column property="type" label="类型">
                          </el-table-column>
                          <el-table-column
                            property="user"
                            label="操作人"
                          ></el-table-column>
                          <el-table-column
                            property="create_time"
                            label="操作时间"
                          ></el-table-column>
                        </el-table>
                      </el-popover>
                    </div>
                  </div>
                </td>
              </tr>
              <!-- 循环tr -->
              <template v-for="(child, index) in item.items">
                <tr>
                  <template v-if="index == 0">
                    <td>{{ child.item_pre_id }}</td>
                    <td>{{ child.goods_name }}</td>
                    <td align="center">{{ child.sell_price }}</td>
                    <td align="center">{{ child.refund_price }}</td>
                    <td align="center">{{ child.all_count }}</td>
                    <td align="center">{{ child.amount }}</td>
                    <td :rowspan="item.items.length">
                      {{ item.note }}
                    </td>
                    <td align="center" :rowspan="item.items.length">
                      {{ item.refund_pay_type }}
                    </td>
                    <td align="left" :rowspan="item.items.length">
                      <div>掌柜:{{ item.buyer_info.buyer_name }}</div>
                      <div>店铺:{{ item.buyer_info.alias_name }}</div>
                      <div>电话:{{ item.buyer_info.phone }}</div>
                    </td>
                    <td align="center" :rowspan="item.items.length">
                      <el-button
                        v-if="item.status_code == 1"
                        type="text"
                        @click="approveBtn(item.id)"
                        >审核</el-button
                      >
                    </td>
                  </template>
                  <template v-else>
                    <td>{{ child.item_pre_id }}</td>
                    <td>{{ child.goods_name }}</td>
                    <td align="center">{{ child.sell_price }}</td>
                    <td align="center">{{ child.refund_price }}</td>
                    <td align="center">{{ child.all_count }}</td>
                    <td align="center">{{ child.amount }}</td>
                  </template>
                </tr>
              </template>
            </tbody>
          </table>
        </template>
      </div>
      <Page
        v-if="state.totalPage"
        :totalPage="state.totalPage"
        @changePage="changePage"
      ></Page>

      <!-- 审核操作 -->
      <el-dialog
        title="审核"
        width="20%"
        v-model="state.approve_dialogVisible"
        center
      >
        <div>
          <el-form
            ref="mutilform"
            :model="state.ruleForm"
            :rules="state.rules"
            label-width="100px"
          >
            <el-form-item label="类型" prop="chose_type">
              <el-radio-group v-model="state.ruleForm.chose_type">
                <el-radio label="0">拒绝</el-radio>
                <el-radio label="1">通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="note">
              <el-input
                type="textarea"
                v-model="state.ruleForm.note"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
            <Upload :action="state.up_url" @onSuccess="onSuccess">
              <el-button size="small" type="primary">点击上传</el-button>
            </Upload>
            <ul>
              <li
                @click="preview(item)"
                v-for="(item, index) in state.file_list"
                :key="item.id"
                :data-url="item.url"
              >
                {{ item.name
                }}<i class="el-icon-close" @click.stop="delPic(item)"></i>
              </li>
            </ul>
            <el-form-item>
              <el-button @click="state.approve_dialogVisible = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="optionBtn()">确 认</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <!-- 预览组件 -->
      <Preview
        :url="state.show_current_url"
        :srcList="show_current_arr"
      ></Preview>
    </el-card>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  onMounted,
  watch,
  computed,
  getCurrentInstance,
  provide,
} from "vue";
import { ElNotification } from "element-plus";
import searchDiv from "@/components/Search.vue";
import Page from "../../components/Pagination.vue";
import Upload from "@/components/Upload.vue";
import Preview from "@/components/Preview_img.vue";
export default {
    name:"refund_list",
  components: {
    searchDiv,
    Page,
    Upload,
    Preview,
  },
  props: {},
  setup() {
    let mutilform = ref("null");
    const { ctx } = getCurrentInstance();
    let state = reactive({
      show_window: false,
      placeholder: "请输入您要搜索的",
      up_url: "/api/tanxiaji/common/upload_file/",
      common_id: "",
      waretype: "",
      show_current_url: "",
      show_current_arr: [],
      approve_dialogVisible: false,
      file_list: [],
      value1: [],
      begin_date: "",
      end_date: "",
      page: 1,
      waretype: "",
      totalPage: 1,
      keywords: "",
      result: [],
      ruleForm: {
        chose_type: "",
        note: "",
      },
      rules: {
        chose_type: [
          { required: true, message: "请选择类型", trigger: "change" },
        ],
      },
    });
    function onSuccess(e) {
      console.log("接收到子组件的回调", e);
      state.file_list.push(e);
    }
    // 预览
    function preview(item) {
      state.show_current_url = item.url;
      state.show_current_arr = [item.url];
    }
    // 审核
    function approveBtn(item) {
      console.log(item);
      state.common_id = item;
      state.approve_dialogVisible = true;
      state.ruleForm.chose_type = "";
      state.ruleForm.note = "";
      state.file_list = [];
    }
    // 搜索框
    function searchClick(e) {
      console.log(e);
      state.keywords = e;
      getOrderlist();
    }
    onMounted(() => {
      getOrderlist();
    });
    // 获取页面数据
    function getOrderlist() {
      ctx.$http
        .get("/tanxiaji/delivery/refund/list/", {
          status: state.waretype,
          start_date: state.begin_date,
          end_data: state.end_date,
          keywords: state.keywords || "",
          buyer_id: "",
          page_count: "",
          page: state.page,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.result = res.data.result;
            state.totalPage = res.data.page_count;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    //删除图片
    function delPic(item) {
      state.file_list.splice(
        state.file_list.findIndex((v) => v.id == item.id),
        1
      );
      console.log(state.file_list);
    }

    // 提交操作
    function optionBtn() {
      mutilform.value.validate((valid) => {
        if (valid) {
          let fileArr = [];
          state.file_list.filter((v) => fileArr.push(v.url));
          ctx.$http
            .post("/tanxiaji/delivery/refund/audit/", {
              order_id: state.common_id,
              status: state.ruleForm.chose_type,
              note: state.ruleForm.note,
              file_url_list: JSON.stringify(fileArr),
            })
            .then((res) => {
              ElNotification.success(res.errmsg);
              getOrderlist();
            })
            .catch((err) => {
              ElNotification.error(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
    // 时间范围取值格式化
    function chooseTimeRange(e) {
      if (e != null) {
        state.begin_date = dayjs(e[0]).format("YYYY-MM-DD");
        state.end_date = dayjs(e[1]).format("YYYY-MM-DD");
      } else {
        state.begin_date = "";
        state.end_date = "";
      }
      getOrderlist();
    }
    return {
      preview,
      mutilform,
      state,
      chooseTimeRange,
      getOrderlist,
      searchClick,
      approveBtn,
      optionBtn,
      onSuccess,
      delPic,
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  .el-card {
    height: 100%;
    overflow-y: auto;
    .cart-title::before {
      content: " ";
      width: 4px;
      height: 20px;
      background: #1890ff;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
    .rowDiv {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .row-left {
        display: flex;
        width: 70%;
        justify-content: space-between;
        .row-item {
          display: flex;
          align-items: center;
          white-space: nowrap;
        }
      }
      .row-right {
        width: 15%;
        display: flex;
        justify-content: flex-end;
      }
    }
    .el-table /deep/ th {
      background-color: #eaeaea;
      text-align: center;
    }
    .el-table /deep/ td {
      text-align: center;
    }
    .el-select {
      width: 100%;
    }
    // 组装table
    .order-headr-fixed {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      font-size: 13px;
      border: none;
      color: #909399;
      th {
        text-align: center;
        background: #eaeaea;
        padding: 8px 0;
        border: none;
      }
    }
    // 订单表格
    .order_list {
      .orderTb {
        width: 100%;
        border-collapse: collapse;
        border: none;
        font-size: 14px;
        margin-top: 8px;
      }
      .orderTb tr td {
        padding: 8px;
      }
      .orderTb tr th {
        padding: 0;
        border: none;
      }
      .orderTb:hover {
        background: #f7f8fa;
      }
      .p-double {
        background: #f7f8fa;
      }
      .navFlex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f7f8fa;
        .flexleft {
          display: flex;
          align-items: center;
          width: 84%;
          .nav-item {
            margin-right: 80px;
          }
        }
        .flexright {
          cursor: pointer;
          color: rgb(46, 127, 181);
          position: relative;
          flex: 1;
          display: flex;
          justify-content: flex-end;
        }
      }
      .cssFlex {
        display: flex;
        justify-content: space-between;
        .logs-right {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          .editLog {
            cursor: pointer;
            color: rgb(46, 127, 181);
          }
        }
      }
      .optionDiv {
        padding: 4px 0;
        cursor: pointer;
        color: rgb(46, 127, 181);
      }
      .optionDiv:hover {
        text-decoration: underline;
      }
    }
    .handDiv {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      padding: 4px 0;
      margin-right: 5px;
      list-style: none;
    }
  }
}
</style>